<template>
	<div>
		<div class="query">
			<el-button type="danger" class="inputborder" @click="deletedBatchClues">批量删除</el-button>
			<!-- 查询 -->
			<el-input class="inputborder" v-model.trim="name" placeholder="输入姓名" @keyup.enter.native="onQuery(1)" style="width: 180px" />
			<el-input class="inputborder" v-model.number="minAge" placeholder="最小年龄" @keyup.enter.native="onQuery(1)" style="width: 80px" />/
			<el-input class="inputborder" v-model.number="maxAge" placeholder="最大年龄" @keyup.enter.native="onQuery(1)" style="width: 80px" />
			<el-select class="inputborder" v-model.trim="province" placeholder="选择省份" style="width: 150px">
				<el-option v-for="(item,index) in provinceList" :label="item" :value="item" />
			</el-select>
			<el-select class="inputborder" v-model.trim="product" placeholder="选择意向产品" style="width: 150px">
				<el-option v-for="(item,index) in productList" :label="item.productName" :value="item.productId" />
			</el-select>
			旅游人数
			<el-input class="inputborder" v-model.number="minNumber" @keyup.enter.native="onQuery(1)" placeholder="最小人数" style="width: 80px" />/
			<el-input class="inputborder" v-model.number="maxNumber" @keyup.enter.native="onQuery(1)" placeholder="最大人数" style="width: 80px" />
			<el-input class="inputborder" v-model.trim="source" @keyup.enter.native="onQuery(1)" placeholder="填写线索来源" style="width: 160px" />
			<el-button @click="onQuery(1)" type="primary">搜索</el-button>
			<el-button @click="onReset" type="warning">重置</el-button>
		</div>
		<div class="showData">
			<!-- 表格 -->
			<el-table :data="list" style="width: 100%" @selection-change="handleSelectionChange">
				<!-- 选项框 -->
				<el-table-column fixed type="selection" width="55" align="center" />
				<!-- 序号 -->
				<el-table-column fixed label="序号" width="60" align="center">
					<template #default="scop">
						<span v-text="(this.currentPage-1)*10 +scop.$index +1" width="60"> </span>
					</template>
				</el-table-column>

				<el-table-column fixed prop="customerName" label="姓名" width="150" align="center" />
				<el-table-column prop="gender" label="性别" width="120" align="center">
					<template #default="scop">
						<span v-if="scop.row.gender == 1">男</span>
						<span v-else>女</span>
					</template>
				</el-table-column>
				<el-table-column prop="age" label="年龄" width="120" align="center" />
				<el-table-column prop="province" label="省份" width="120" align="center" />
				<el-table-column prop="contactNumber" label="联系电话" width="150" align="center" />
				<el-table-column prop="intentionalProductId" label="意向产品" width="120" align="center" />
				<el-table-column prop="travelersCount" label="旅游人数" width="120" align="center" />
				<el-table-column prop="clueSource" label="线索来源" width="150" align="center" />
				<el-table-column prop="createdTime" label="创建时间" width="180" align="center" />

				<el-table-column fixed="right" label="操作" width="300" align="center">
					<template #default="scope">
						<el-button type="primary" size="small" plain
							@click="viewDetail(scope.$index, scope.row)">查看详情</el-button>
						<el-button type="success" size="small" plain
							@click="assignClue(scope.$index, scope.row)">分配线索</el-button>
						<el-button type="danger" size="small" plain
							@click="deleteClueOne(scope.$index, scope.row)">删除线索</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 查看详情的弹窗 -->
			<el-dialog v-model="selectClueDetailsView" title="线索的详细信息" width="1200px">
				<ClueDetail :clueDetails="clueDetails"></ClueDetail>
			</el-dialog>

			<!-- 分配线索的弹窗 -->
			<el-drawer v-model="assignedClueView" :show-close="false" size="1200">
				<template #header="{ close, titleId, titleClass }">
					<h4>分配线索</h4>
					<el-button type="danger" @click="close">
						<el-icon class="el-icon--left">
							<CircleCloseFilled />
						</el-icon>
						关闭
					</el-button>
				</template>
				<template #footer>
					<span class="dialog-footer">
						<el-button @click="saleConcelItem(0)">取消</el-button>
						<el-button type="primary" @click="saleConcelItem(1)">分配</el-button>
					</span>
				</template>
				<!-- 内容的线索（抽屉） -->
				<el-divider content-position="left">线索信息</el-divider>
				<el-descriptions :column="4" border>
					<el-descriptions-item label="客户姓名" label-align="center"
						align="center">{{currentSelectedObj.customerName}}</el-descriptions-item>
					<el-descriptions-item label="性别" label-align="center" align="center">
						<span v-if="currentSelectedObj.gender == 1">男</span>
						<span v-else>女</span>
					</el-descriptions-item>
					<el-descriptions-item label="年龄" label-align="center"
						align="center">{{currentSelectedObj.age}}</el-descriptions-item>
					<el-descriptions-item label="学历" label-align="center"
						align="center">{{currentSelectedObj.education}}</el-descriptions-item>
					<el-descriptions-item label="职业" label-align="center"
						align="center">{{currentSelectedObj.occupation}}</el-descriptions-item>
					<el-descriptions-item label="省份" label-align="center"
						align="center">{{currentSelectedObj.province}}</el-descriptions-item>
					<el-descriptions-item label="旅游人数" label-align="center"
						align="center">{{currentSelectedObj.travelersCount}}</el-descriptions-item>
					<el-descriptions-item label="出行类型" label-align="center"
						align="center">{{currentSelectedObj.travelType}}</el-descriptions-item>
					<el-descriptions-item label="意向产品ID" label-align="center"
						align="center">{{currentSelectedObj.intentionalProductId}}</el-descriptions-item>
					<el-descriptions-item label="线索来源" label-align="center"
						align="center">{{currentSelectedObj.clueSource}}</el-descriptions-item>
					<el-descriptions-item label="创建时间" label-align="center"
						align="center">{{currentSelectedObj.createdTime}}</el-descriptions-item>
					<el-descriptions-item label="备注" label-align="center"
						align="center">{{currentSelectedObj.note}}</el-descriptions-item>
				</el-descriptions>
				<br />
				<el-divider content-position="left">选择销售人员</el-divider>
				<el-input class="saleborder" v-model.trim="salespersonName" @keyup.enter.native="selectSalePersonInfo" placeholder="输入销售员名字"
					style="width: 180px;" />
				<el-input class="saleborder" v-model.trim="suitableCustomerType" @keyup.enter.native="selectSalePersonInfo" placeholder="输入适合客户类型"
					style="width: 180px;" />
				<el-input class="saleborder" v-model.trim="note" @keyup.enter.native="selectSalePersonInfo" placeholder="输入擅长处理的业务" style="width: 180px;" />

				<el-button type="success" @click="selectSalePersonInfo">搜索</el-button>
				<el-button type="danger" @click="saleReset">重置</el-button>
				<el-table :data="salespersonList" style="width: 100%; margin: 10px 0px;" ref="multipleTable"
					@row-click="handleSelectionChange" @selection-change="handleSelectionChange">
					<!-- 选项框 -->
					<el-table-column label="选择" align="center" width="65">
						<template #default="scope">
							<el-radio v-model="radio" :label="scope.$index"
								@change.native="getCurrentRow(scope.row)">&nbsp;</el-radio>
						</template>
					</el-table-column>

					<!-- 序号 -->
					<el-table-column label="序号" width="60" align="center">
						<template #default="scope">
							<span v-text="(this.currentPage-1)*2 +scope.$index +1" width="60"> </span>
						</template>
					</el-table-column>
					<el-table-column prop="salespersonName" label="销售员姓名" width="150" header-align="center"
						align="center" />
					<el-table-column prop="gender" label="性别" width="80" header-align="center" align="center">
						<template #default="scop">
							<span v-if="scop.row.gender == 1">男</span>
							<span v-else>女</span>
						</template>
					</el-table-column>
					<el-table-column prop="contactNumber" label="联系电话" width="150" header-align="center"
						align="center" />
					<el-table-column prop="count" label="线索数" width="120" header-align="center" align="center" />

					<el-table-column prop="suitableCustomerType" label="适合客户类型" header-align="center" align="center"
						width="200" />
					<!-- 1: 存在，0：已删除 -->
					<el-table-column prop="status" label="状态" header-align="center" align="center" width="80">
						<template #default="scop">
							<span v-if="scop.row.status == 1">可用</span>
							<span v-else>已删除</span>
						</template>
					</el-table-column>
					<el-table-column prop="note" label="备注" header-align="center" align="center" />
				</el-table>

				<!-- 销售人员 ： 分页按钮 -->
				<el-button class="saleborder" v-if="saleCurrentPage == 1" type="info" disabled>上一页</el-button>
				<el-button class="saleborder" v-else type="primary" @click="toPreviousSale">上一页</el-button>
				<span class="saleborder">{{saleCurrentPage}}</span>

				<el-button v-if="saleCurrentPage == salePages" type="info" disabled>下一页</el-button>
				<el-button v-else type="primary" @click="toNextSale">下一页</el-button>

				<span class="saleborder">总记录数：{{saleTotal}}</span>
				<span class="saleborder">总页数：{{salePages}}</span>
			</el-drawer>

			<!-- 删除线索的弹窗 -->
			<el-dialog v-model="deletedClueView" title="删除线索">
				<el-form-item>
					确定需要删除该线索吗？
				</el-form-item>

				<template #footer>
					<span class="dialog-footer">
						<el-button type="info" @click="deleteItem(0)">取消</el-button>
						<el-button type="danger" @click="deleteItem(1)">确定</el-button>
					</span>
				</template>
			</el-dialog>

			<!-- 批量删除 -->
			<el-dialog v-model="deletedBatchClueView" title="删除线索">
				<el-form-item>
					确定需要批量删除线索吗？
				</el-form-item>

				<template #footer>
					<span class="dialog-footer">
						<el-button type="info" @click="deleteBatchItem(0)">取消</el-button>
						<el-button type="danger" @click="deleteBatchItem(1)">确定</el-button>
					</span>
				</template>
			</el-dialog>

		</div>
	</div>
</template>

<script>
	import ClueDetail from "../components/clueDetail.vue"
	export default {
		name: 'DisassignedClueComponent',
		props: ["list", "currentPage"],
		components: {
			ClueDetail,
		},
		data() {
			return {
				clueList: [],
				// tableData: this.list,
				// 存储详细信息
				clueDetails: {},
				// 查看详细信息的弹窗
				selectClueDetailsView: false,
				//
				formInfo1: {
					date: "jeroe",
					name: "jo4343"
				},
				// 分配线索的弹窗
				assignedClueView: false,
				//
				formInfo2: {
					date: "jeroe",
					name: "jo4343"
				},
				// 省份信息
				provinceList: [
					"河北", "山西", "吉林", "辽宁", "黑龙江", "陕西", "甘肃", "青海",
					"山东", "福建", "浙江", "河南", "湖北", "湖南", "江西", "江苏", "安徽",
					"广东", "海南", "四川", "贵州", "云南", "台湾", "北京", "上海", "天津",
					"重庆", "内蒙古自治区", "新疆维吾尔自治区", "宁夏回族自治区", "广西壮族自治区",
					"新疆自治区", "香港特别行政区", "澳门特别行政区"
				],
				// 产品信息的查询
				productList: [],
				// 多条件查询的查询条件
				name: '', // 姓名
				minAge: '', // 最小年龄
				maxAge: '', // 最大年龄
				province: '', // 省份
				product: '', // 产品
				minNumber: '', // 最小人数（旅游人数）
				maxNumber: '', // 最大人数
				source: '', // 线索来源

				// 删除id数组
				deletedClueIdList: [],
				deletedClueView: false,
				deletedId: '',

				// 批量删除
				deletedBatchClueView: false,

				// 当前选择的信息
				currentSelectedObj: {},

				// 销售人员的信息；
				salespersonList: [],
				// 销售人员当前的线索数；

				// 销售人员信息的分页
				saleCurrentPage: 1, // 当前页
				saleTotal: 0, // 总记录数
				salePages: 0, // 总页数
				radio: "", // 选中状态
				saleId: '', // 销售人员的id;
				saleCurrentClueCountList: [], // 当前销售人员的线索数；

				// 销售人员的条件：
				salespersonName: '',
				suitableCustomerType: '',
				note: '',
			}
		},
		// 声明方法
		methods: {
			changeDisassignedClue() {
				this.$emit('changeClue', this.clueList, this.deletedClueIdList);
			},
			// 返回选中的信息给父组件
			// selectedClue() {
			// 	alert("给父组件传值" + this.deletedClueIdList);
			// 	this.$emit('selectedClues',this.deletedClueIdList);
			// },
			changeQueryConditon() {
				let obj1 = {
					name: this.name,
					minAge: this.minAge,
					maxAge: this.maxAge,
					province: this.province,
					product: this.product,
					minNumber: this.minNumber,
					maxNumber: this.maxNumber,
					source: this.source
				};
				this.$emit('queryObject', obj1)
			},
			// 查看详细信息
			viewDetail(index, row) {
				this.selectClueDetailsView = true;
				// clueId
				let id = row.clueId;
				this.$axios({
					url: 'clue/customerClue/selectClueOneById',
					methods: 'post',
					params: {
						id: id,
					}
				}).then(res => {
					this.clueDetails = res.data;

				})
			},
			// 进行线索的分配
			assignClue(index, row) {
				this.currentSelectedObj = row;
				this.assignedClueView = true;

				// 查询销售信息
				this.selectSalePersonInfo();

			},
			// 查询所有的销售人员的信息
			selectSalePersonInfo() {
				console.log("查询销售人员" + this.saleCurrentPage);

				this.$axios({
					url: 'clue/salesperson/seletedSalespersonByCondition',
					method: 'post',
					params: {
						salespersonName: this.salespersonName, // 销售员名字
						suitableCustomerType: this.suitableCustomerType, // 销售员适合处理的类型
						note: this.note, // 备注
						currentPage: this.saleCurrentPage,
					}
				}).then(res => {
					console.log("销售人员的数据：" + res.data.list)
					this.salespersonList = res.data.list;
					console.log("当前线索数：" + res.data.clueCountList);
					for (let i = 0; i < this.salespersonList.length; i++) {
						console.log("线索数：" + res.data.clueCountList[i]);
						this.salespersonList[i].count = res.data.clueCountList[i];
					}

					// 分页
					this.saleTotal = res.data.total;
					this.salePages = res.data.pages;

				});

			},
			// 销售人员 - 上一页
			toPreviousSale() {
				this.saleCurrentPage--;
				this.selectSalePersonInfo();
			},
			// 销售人员 - 下一页
			toNextSale() {
				this.saleCurrentPage++;
				this.selectSalePersonInfo();
			},
			saleReset() {
				this.salespersonName = ""; // 销售员名字
				this.suitableCustomerType = ""; // 销售员适合处理的类型
				this.note = ""; // 备注
			},
			// 选中的销售人员
			getCurrentRow(row) {
				// 获取选中数据   row表示选中这一行的数据，可以从里面提取所需要的值
				this.saleId = row.salespersonId;
			},
			saleConcelItem(index) {
				if (index == 0) {
					// 取消
					this.assignedClueView = false;

				} else {
					// 分配
					if (this.saleId == "") {
						ElMessage({
						    message: '未选择分配的销售人员，无法进行分配',
						    type: 'warning',
						  })
						return;
					}
					this.$axios({
						url: 'clue/customerClue/assignClue',
						method: 'post',
						params: {
							clueId: this.currentSelectedObj.clueId,
							headId: this.saleId,
						},
					}).then(res => {
						if (res.data == true) {
							ElMessage({
							    message: '分配成功',
							    type: 'success',
							  });
						} else {
							ElMessage.error('分配失败');
						}
						this.saleId = "";
					})
				}
				this.radio = {};
			},
			// 关闭线索分配的弹窗
			concelItem(index) {
				if (index == 0) {
					// 取消
					this.formInfo2 = {};
					this.assignedClueView = false;
				} else if (index == 1) {
					// 分配

				} else if (index == 2) {
					// 重置 -- 清空数据
					this.formInfo2 = {};
				}
			},
			// 开启删除线索的弹窗
			deleteClueOne(index, row) {
				this.deletedClueView = true;
				this.deletedId = row.clueId;
			},
			// 删除线索的弹窗
			deleteItem(index) {
				if (index == 0) {
					// 取消
					this.deletedClueView = false;

				} else {
					this.deletedClueIdList = [];

					this.deletedClueIdList.unshift(this.deletedId);
					this.deletedClueView = false;
					// 确定删除
					this.$axios({
						url: 'clue/customerClue/deleteClues',
						method: "post",
						data: this.deletedClueIdList,
					}).then(res => {
						if (res.data == true) {
							ElMessage({
							    message: '删除成功',
							    type: 'success',
							  });
							// 刷新表格数据
							this.changeDisassignedClue(this.deletedClueIdList);
						} else {
							ElMessage.error('删除失败');
							
						}
						// 清空数组
						this.deletedClueIdList = [];
					})
				}
			},
			// 获取当前选中的信息
			handleSelectionChange(val) {
				this.deletedClueIdList = [];
				for (let i = 0; i < val.length; i++) {
					this.deletedClueIdList.unshift(val[i].clueId);
				}
			},
			// 进行批量删除
			deletedBatchClues() {
				this.deletedBatchClueView = true;
			},
			deleteBatchItem(index) {
				if (index == 0) {
					// 取消
					this.deletedBatchClueView = false;

				} else {
					this.deletedBatchClueView = false;
					// 确定删除
					this.$axios({
						url: 'clue/customerClue/deleteClues',
						method: "post",
						data: this.deletedClueIdList,
					}).then(res => {
						if (res.data == true) {
							ElMessage({
							    message: '删除成功',
							    type: 'success',
							  });
							// 刷新表格数据
							this.changeDisassignedClue(this.deletedClueIdList);
						} else {
							ElMessage.error('删除失败');
						}
						// 清空数组
						this.deletedClueIdList = [];
					})
				}
			},
			// 搜索
			onReset() {
				// 重置
				this.clearQueryInputCondition();
			},
			onQuery(index) {
				this.changeQueryConditon();
				// 清空数据
				this.clearQueryInputCondition();
			},
			clearQueryInputCondition() {
				// 清空查询条件
				this.name = '';
				this.minAge = '';
				this.maxAge = '';
				this.province = '';
				this.product = '';
				this.minNumber = '';
				this.maxNumber = '';
				this.source = '';
			}
		},
		created() {
			// 获取所有产品的信息
			this.$axios({
				url: "clue/travelProduct/selectAllProduct",
				method: "post"
			}).then(res => {
				this.productList = res.data;
			});
		}
	}
</script>

<style scoped>
	.query {
		margin-bottom: 15px;
	}

	.query .inputborder {
		margin-right: 10px;
	}

	:deep(.my-label) {
		background: var(--el-color-success-light-9) !important;
	}

	:deep(.my-content) {
		background: var(--el-color-danger-light-9);
	}

	.saleborder {
		margin-right: 10px;
	}
</style>